<template>
  <div class="discuss-root">
    <div class="comment-wrapper">
      <img width="50px" height="50px" :src="imgSrc">
      <div class="discuss">
          <vue-markdown :source="item && item.content"></vue-markdown>
          <div class="icon-block">
              <my-icon icon="ios-person-outline" size="15">{{ item && item.username }}</my-icon>
              <div style="margin-left:10px">{{  item && creatTime }}</div>
              <div class="icon-click">
                 <my-icon icon="md-trash" :size="20" @click.native="emitDel" v-if="item.canDelete">删除</my-icon>
                <my-icon icon="ios-eye-outline" :size="20">{{  item && item.view }}</my-icon>
                <my-icon icon="ios-text-outline" :size="20" @click.native="emitExpand">{{  item && item.reply }}</my-icon>
                <my-icon icon="ios-thumbs-up-outline" :size="20" @click.native="emitLike">{{  item && item.vote }}</my-icon>
              </div>
          </div> 
      </div>
    </div>
    <slot name="reply"></slot>
  </div>
</template>

<script>
import { getRelativeTimeString } from "@/utils/time";
import VueMarkdown from 'vue-markdown';
import { domain } from '@/utils/host';
export default { 
  components:{ VueMarkdown },
  props:{
    item:{
      type: Object,
      required: true
    }
  },
  computed:{
    imgSrc(){
        return `${domain}/fdl/preImages/${this.item.headImg}`
    },
    creatTime(){
        return getRelativeTimeString(this.item.createTime / 1000)
    }
  },
  methods:{
    emitLike(){
      this.$emit("emitLike",this.item.id) 
    },
    emitDel(){
      this.$emit("emitDel",this.item.id) 
    },
    emitExpand(){
      this.$emit("emitExpand",this.item.id)
    }
  }
}
</script>

<style lang="scss" scoped>
  .discuss-root{
     border-bottom:1px solid rgba(217,219,221,1);
  }
  .comment-wrapper{
      display: flex;
      align-items: center;
      padding: 20px 0;
      img{
        width:50px;
        height: 50px;
        display: inline-block;
        border-radius: 50%;
      }
      

      .discuss{
          flex:1;
          margin-left:20px;
            p{
              font-size:18px;
              font-weight:bold;
              color:rgba(51,51,51,1);
            }
            .icon-block{
              font-size:12px;
              font-weight:400;
              color:rgba(153,153,153,1);
              display: flex;
              align-items: center;
              .icon-click{
                flex: 1;
                display: flex;
                justify-content: flex-end;

                & > .root{
                  margin: 0 5px;
                  cursor: pointer;
                }
              }
            } 
        }
}
</style>